<template>
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<uni-nav-bar left-icon="back" title="新股申购" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack">
            <view class="xszn" @click="tonavigateTo('/pages/public/newShare/timetable')">打新指南</view>
        </uni-nav-bar>
		<view class="margin-top-sm bg_FFFFFF">
			<view class="padding-lr text-black padding-tb-sm border-bottom-1B202C" style="border-bottom-color: #DDDDDD;font-weight: bold;">
				今日申购
				<button class="cu-btn sm" @click="onekeyApply()" style="color: #FFFFFF;background-color: #E54D42;float:right">一键申购</button>
                
				</view>
		
			<view class="flex align-center padding-lr padding-tb-sm">
				<view class="flex-sub color_99A2B5 text-df" style="width: ;">股票名称\股票代码</view>
				<view class="flex-sub color_99A2B5 text-df text-center">发行价</view>
				<view class="flex-sub color_99A2B5 text-df text-center">申购上限</view>
				<view class="flex-sub color_99A2B5 text-df text-right">操作</view>
			</view>
			<view class="padding-lr">
				<view class="flex align-center padding-tb border-bottom-1B202C"  v-for="(item, index) in data" :key="index">
					<view class="flex-sub text-df">
						<view class="text-black text-df">{{item.name}}<br/>{{item.code}}</view>
					</view>
					<view class="flex-sub text-black text-sm text-center">{{item.money}}</view>
					<view class="flex-sub color_E23232 text-sm text-center">{{item.limit_max}}万股</view>
					<view class="flex-sub color_99A2B5 text-right">
						<button class="cu-btn sm" @click="apply(item)" style="color: #FFFFFF;background-color: #E54D42;">申购</button>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm bg_FFFFFF">
			<view class="padding-lr text-black padding-tb-sm border-bottom-1B202C" style="border-bottom-color: #DDDDDD;font-weight: bold;">待申购</view>
			<view class="flex align-center padding-lr padding-tb-sm">
				<view class="flex-sub color_99A2B5 text-df">股票名称\股票代码</view>
				<!-- <view class="flex-sub color_99A2B5 text-df text-center">代码</view> -->
				<view class="flex-sub color_99A2B5 text-df text-center">发行价</view>
				<view class="flex-sub color_99A2B5 text-df text-right">发行日期</view>
			</view>
			<view class="padding-lr">
				<view class="flex align-center padding-tb border-bottom-1B202C" style="border-bottom-color: #DDDDDD;font-weight: bold;" v-for="(item, index) in dataCantBuy" :key="index">
					<view class="flex-sub text-df">
						<view class="text-black text-df">{{item.name}}<br/>{{item.code}}</view>
					</view>
					<!-- <view class="flex-sub text-black text-sm text-center">{{item.code}}</view> -->
					<view class="flex-sub color_99A2B5 text-sm text-center">{{item.money}}</view>
					<view class="flex-sub color_99A2B5 text-sm text-right">{{item.atime.replace(/00:00:00/,'')}}</view>
				</view>
			</view>
		</view>

		<!-- 申购弹出 -->
		<u-modal v-model="show" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">
				<!-- 关闭按钮 start-->
				<view class="flex justify-end align-center padding-sm">
					<image src="/static/images/icon/close.png" mode="widthFix" style="width: 30rpx;" @click="show = !show"></image>
				</view>
				<!-- 关闭按钮 end-->
				<view class="color_333333 text-center text-bold text-xl">{{selectData.name}}</view>
				<view class="color_999999 text-center text-bold text-lg margin-top-xs">{{selectData.code}}</view>
				<view class="flex justify-between align-center padding-tb margin-top-sm">
					<view class="flex-sub">
						<view class="text-df color_E23232 text-center">{{selectData.money}}</view>
						<view class="margin-top-xs color_999999 text-df text-center">申购价格</view>
					</view>
				</view>
				<view class="padding-lr">
					<view class="flex align-center padding-tb-sm">
						<view class="color_666666 text-bold text-lg">申购数量：</view>
						<u-input placeholder="请输入申购数量" v-model="num" type="number" :border="true" />
					</view>
					<!-- 
					<view class="flex align-center padding-tb-sm">
						<view class="color_666666 text-bold text-lg">最大申购：</view>
						<view class="color_666666 text-df">32225548.00</view>
					</view>
					<view class="flex align-center padding-tb-sm">
						<view class="color_666666 text-bold text-lg">可用资金：</view>
						<view class="color_E23232 text-df">200000.00</view>
					</view>
					 -->
				</view>
				<view class="padding-lr-xl padding-tb-lg flex flex-direction">
					<button class="cu-btn lg" @click="success" style="color: #FFFFFF;background-color: #E54D42;">确认申购</button>
				</view>
			</view>
		
		</u-modal>
		<!-- 申购弹出 end -->
		
		<!-- 一键申购弹出 -->
		<u-modal v-model="onkeyshow" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">
				<!-- 关闭按钮 start-->
				<view class="flex justify-end align-center padding-sm">
					<image src="/static/images/icon/close.png" mode="widthFix" style="width: 30rpx;" @click="onkeyshow = !onkeyshow"></image>
				</view>
				<!-- 关闭按钮 end-->
			<view class="color_333333 text-center text-bold text-xl">确定要一键申购吗？</view>
				<view class="padding-lr-xl padding-tb-lg flex flex-direction">
					<button class="cu-btn lg" @click="onkeyApplyUrl()" style="color: #FFFFFF;background-color: #E54D42;">确认申购</button>
				</view>
			</view>
		</u-modal>
		<!-- 申购弹出 end -->
		
		<view>
			<u-toast ref="uToast" />
		</view>		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				// 新增
				onkeyshow:false,
				show: false,
				num:0,//申购数量
				data: [],
				dataCantBuy: [],
				selectData: {},
				tabIndex:1,// 默认1 
			}
		},
		methods: {
			//返回上一页
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 跳转页面
			tonavigateTo(url){
                console.log(url)
				uni.navigateTo({
					url:url
				})
			},
			cancel() {
				this.show = false;
			},
			success() {
				if(this.num == ""){
					this.$refs.uToast.show({
						title: '请输入申购数量',
					})
					return;
				}
				this.num = parseInt(this.num / 100) * 100;
				this.$Request.post(this.$api.index.apply, {
					sname: this.selectData.name,
					scode: this.selectData.code,
					smoney: this.selectData.money,
					snum: this.num
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 0) {
						uni.navigateTo({
							url: "/pages/member/myShare", //去我的申购
						});
					}
					if(res.msg == "申购中，请耐心等待中签结果"){
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/member/myShare", //去我的申购
							});
						},2000);
					}
				})			
			},
			onkeyApplyUrl(){
				this.$Request.post(this.$api.index.oneKeyApply, {
					// sname: this.selectData.name,
					// scode: this.selectData.code,
					// smoney: this.selectData.money,
					// snum: this.num
				}).then(res => {
					console.log(res)
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 0) {
						uni.navigateTo({
							url: "/pages/member/myShare", //去我的申购
						});
					}
					if(res.msg == "申购中，请耐心等待中签结果"){
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/member/myShare", //去我的申购
							});
						},2000);
					}
					
				})
			},
			onekeyApply(){
				this.onkeyshow=true
			},
			apply(item) {
				this.$Request.post(this.$api.index.getUser).then(res => {
					console.log(res);
					if (res.data.ischeck == 0) {
						this.$refs.uToast.show({
							title: '请先实名认证',
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/member/realname", //未实名认证去实名认证
							});
			
						}, 1000);
			
					} else {
						this.show = true;
						this.selectData = item;
					}
				})
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					}
				})
			},
			getNewShares() {
				let type = 1;// 1 当天 2 未上市时间
				let data = {
					type:type
				}
				this.$Request.post(this.$api.index.getNewShares,data).then(res => {
					this.data = res.data;
				})
			},
			getNewSharesCantBuy() {
				let type = 2;// 1 当天 2 未上市时间
				let data = {
					type:type
				}
				this.$Request.post(this.$api.index.getNewShares,data).then(res => {
					this.dataCantBuy = res.data;
				})
			}
		},
		onLoad(e) {
			this.checkLogin()
			this.getNewShares()
			this.getNewSharesCantBuy()
		}
	}
</script>
<style>
	page{
		background-color: rgb(247,248,250);
	}
</style>
<style lang="scss">
    .xszn{
        position: fixed;
        right: 28rpx;
        font-size: 24rpx;
    }
	.cu-btn {
		border-radius: 4rpx;
	}
</style>
